<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>case5例</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
			<style type="text/css">
			.box1{
				width: 200px;
				height: 100px;
				background-color: #0037FF;
				margin-left: 50px;
				margin-top: 50px;
				transition: all 2s /* linear 1s */;/* 过渡 linear 延迟*/
			}
			.box1:hover{
				transform: rotate(45deg);
				background-color: #00557f;
				transform: translate(200px,100px);/* 位移 */
				transform: scale(1,2);/* 缩放 */
				transform: skew(30deg,20deg);/* 倾斜 */
				animation: bgc 3s;
			}
			.box2{
				transition: all 1s;
				text-align: left;
			}
			.box2:hover{
				font-size: 30px;
				animation: bgc 3s;
			}
			.box3{
				width: 200px;
				height: 100px;
				background-color: #0037FF;
				margin-left: 50px;
				margin-top: 50px;
				transition: all 2s /* linear 1s */;/* 过渡 linear 延迟*/
			}
			.box3:hover{
				animation: bgc 3s;
			}
			@keyframes bgc{
				0%{
					background-color: #0037FF;
				}
				50%{
					background-color: #EEEEEE;
				}
				100%{
					background-color: aqua;
				}
			}
			a{
				text-decoration: none;
			}
			@keyframes anim1{
			     0% {top: 30px;opacity: 1}
			     50% {top: -30px;opacity: 1}
			     75% {top: -30px ;opacity: 0}
			     100%{top:30px;opacity: 0}
			}
			.p1{
				height:18px;
				overflow: hidden;
				top:30px;
				left: 100px;
				width: 100%;
				position: absolute;
			}
			.p2{
				height:18px;
				overflow: hidden;
				top:50px;
				left: 100px;
				width: 100%;
				position: absolute;
			}
			.p1:hover{
				animation: anim1 5s linear infinite;
			}
		</style>
	</head>
	<body>
		
		<p>这是一首诗：<span style="color: red; font-size: 26px;">《山形》</span></p>
		<p>这是一首诗：<span>《鹿柴》</span></p>
		<span class="fa fa-rocket fa-5x" "></span>
		<ul class="fa-ul">
		  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
		  <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
		  <li><i class="fa-li fa fa-square"></i>List icons</li>
		</ul>
		
		
		<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i><br></br><br></br>
		
		
		<i class="fa fa-spinner fa-spin"></i>
		<i class="fa fa-circle-o-notch fa-spin"></i>
		<i class="fa fa-weibo fa-3x"></i>
		<i class="fa fa-wechat" style="font-size:90px" ></i>
		<i class="fa fa-spinner fa-pulse"></i><br></br>

		<i class="fa fa-shield"></i>
		<i class="fa fa-shield fa-rotate-90"></i>
		<i class="fa fa-shield fa-rotate-180"></i>
		<i class="fa fa-shield fa-rotate-270"></i>
		<i class="fa fa-shield fa-flip-horizontal"></i>
		<i class="fa fa-shield fa-flip-vertical"></i>
		
		<div class="box1"></div>
		<div class="box2">style</div>
		<div class="box3"></div>
		<div class="box4">
			<p class="p1">HOME</p>
		</div>
		<h1 style="text-align: center;">开发者： 192056222 冷奇松</h1>
	</body>
</html>
